<template>
	<view class="venue-types" :class="{ 'grid-layout': layoutType === 'grid' }">
		<template v-if="layoutType === 'scroll-list'">
			<!-- 使用swiper实现滑动翻页 -->
			<swiper class="swiper-container" :current="currentPage" @change="swiperChange" :circular="false"
				:display-multiple-items="1" :indicator-dots="false">
				<swiper-item v-for="(page, pageIndex) in groupedPages" :key="pageIndex">
					<view class="page">
						<view class="type-row" v-for="(row, rowIndex) in splitIntoRows(page)" :key="rowIndex">
							<view class="type-item" v-for="(item, index) in row" :key="index"
								@click="goToSearchPage(item)">
								<view class="icon-container">
									<text class="iconfont" v-html="item.icon"></text>
								</view>
								<text class="type-name"
									:style="{ color: selectedType === item.value ? 'blue' : 'inherit' }">{{item.value}}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="custom-indicator">
				<view v-for="(item, index) in indicatorCount" :key="index"
					:class="['dot', currentPage === index ? 'active' : '']"></view>
			</view>
		</template>

		<template v-else-if="layoutType === 'grid'">
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item, index) in venueTypes" :key="index" @click="goToSearchPage(item)">
					<view class="icon-container">
						<text class="iconfont" v-html="item.icon"></text>
					</view>
					<text class="type-name"
						:style="{ color: selectedType === item.value ? 'blue' : 'inherit' }">{{item.value}}</text>
				</u-grid-item>
			</u-grid>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			venueTypes: {
				type: Array,
				default: () => []
			},
			selectedType: {
				type: String,
				default: ''
			},
			layoutType: {
				type: String,
				default: 'scroll-list'
			},
		},
		data() {
			return {
				currentPage: 0 // 当前页码
			};
		},
		computed: {
			// 按每页 10 个元素进行分组
			groupedPages() {
				const pageSize = 10;
				const grouped = [];
				for (let i = 0; i < this.venueTypes.length; i += pageSize) {
					grouped.push(this.venueTypes.slice(i, i + pageSize));
				}
				return grouped;
			},
			// ...
			indicatorCount() {
				return this.groupedPages.length;
			}
		},
		methods: {
			// 将每页的元素拆分成两行
			splitIntoRows(page) {
				const maxItemsPerRow = 5;
				const firstRow = page.slice(0, maxItemsPerRow);
				const secondRow = page.slice(maxItemsPerRow);
				return [firstRow, secondRow];
			},
			// swiper切换事件
			swiperChange(e) {
				this.currentPage = e.detail.current;
			},
			goToSearchPage(item) {
				console.log('传入的 item:', item);
				uni.navigateTo({
					url: `/pages/search/search?type=${item.type}&selectedType=${item.value}`
				});
			}
		},
		mounted() {
			console.log('子组件接收到的数据:', this.venueTypes);
		}
	}
</script>

<style lang="scss">
	@import '@/static/icon/iconfont.css';

	.venue-types {
		
		padding: 10px 0px 0;
		/* 上 左右 下 */

		.swiper-container {
			// background-color: #55ff7f;
			width: 100%;
			height: 130px;
			padding: 0 0px;
			/* 左右各 5px */
			.page {
				padding: 0;
				/* 移除内边距，让内容占满宽度 */
			}
		}

		.type-row {
			// background-color: #00ffff;
			display: grid;
			grid-template-columns: repeat(5, minmax(0, 1fr));
			/* 5 列均匀分布 */
			gap: 0.5rem;
			/* 图标间距（响应式调整） */
			padding: 0 0px;
			/* 左右微调 */
			margin-bottom: 0.5rem;

			.type-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0.3rem;

				.iconfont {
					font-size: 1.8rem;
					/* 图标大小（rem 单位自适应） */
					margin: 0.2rem 0;
				}

				.type-name {
					font-size: 0.75rem;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	/* 响应式调整 */
	@media (max-width: 375px) {
		.venue-types .type-row {
			gap: 0.25rem;

			.type-item .iconfont {
				font-size: 1.5rem;
			}
		}
	}

	@media (min-width: 600px) {
		.venue-types .type-row {
			gap: 1rem;

			.type-item .iconfont {
				font-size: 2rem;
			}

			.type-name {
				font-size: 0.85rem;
			}
		}
	}

	.custom-indicator {
		display: flex;
		justify-content: center;
		margin: 0rem 0;
		padding: 0rem 0;

		.dot {
			width: 0.3rem;
			height: 0.3rem;
			border-radius: 50%;
			background: #ccc;
			margin: 0 0.15rem;
			transition: all 0.3s ease;
		}

		.active {
			width: 0.9rem;
			border-radius: 0.15rem;
			background: #007aff;
		}
	}

	.grid-layout {
		padding: 10px 5px;

		.u-grid-item {
			margin-bottom: 0.5rem;

			.icon-container .iconfont {
				font-size: 1.75rem;
			}

			.type-name {
				font-size: 0.75rem;
			}
		}
	}
</style>